var app1 = new Vue({
    el: '#app1',
    data: {
        message: 'Hello Vue!'
    }
})

var app2 = new Vue({
    el:'#app2',
    data: {
        message: '页面加载于 ' + new Date().toLocaleDateString()
    }
})

var app3 = new Vue({
    el:'#app3',
    data: {
        seen:true
    }
})

var app4 = new Vue({
    el:'#app4',
    data: {
        todos: [
            {text: '学习Java Script'},
            {text: '学习Vue'},
            {text: '学习整个项目'}
        ]
    }
})

var app5 = new Vue({
    el: '#app5',
    data: {
        message:'Hello Vue.js'
    },
    methods: {
        reverseMessage:function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

var app6 = new Vue({
    el:'#app6',
    data:{
        message:'Hello Vue'
    }
})

// 定义名为 todo-item 的新组件
Vue.component('todo-item',{
    // todo-item 组件现在接受一个"prop"，类似于一个自定义 attribute。
    // 这个 prop 名为 todo。
    props:['todo'],
    template: '<li>{{ todo.text }}</li>>'
})

var app7 = new Vue({
    el:'#app-7',
    data:{
        groceryList:[
            {id: 0, text: '蔬菜'},
            {id: 1, text: '奶酪'},
            {id: 2, text: '随便其他什么人吃的东西'}
        ]
    }
})